<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Choose artboards - Sketch MeaXure</title>

    <link href="assets/css/normalize.css" rel="stylesheet">
    <link href="assets/css/app.css" rel="stylesheet">
    <script type="text/javascript" src="assets/js/jquery-2.2.4.min.js"></script>
    <script type="text/javascript" src="assets/js/common.js"></script>
    <script type="text/javascript">
        var checkVCheckbox = function () {
            var allCheckboxLength = $('input[name=artboards]').length,
                checkedLength = $('input[name=artboards]:checked').length;

            $('.v-checkbox').removeClass('v-checked');
            $('.v-checkbox').removeClass('v-full-checked');

            if (checkedLength && checkedLength < allCheckboxLength) {
                $('.v-checkbox').addClass('v-checked');
            }
            else if (checkedLength && checkedLength >= allCheckboxLength) {
                $('.v-checkbox').addClass('v-full-checked');
            }
            $('#submit').attr('disabled', true);
            if ($('input[name=artboards]:checked').length > 0) {
                $('#submit').attr('disabled', false);
            }
        },
            checkPCheckbox = function (id) {
                $('.page-list').each(function (index) {

                    var allCheckboxLength = $(this).find('input[name=artboards]').length,
                        checkedLength = $(this).find('input[name=artboards]:checked').length;
                    $(this).find('input[name=pages]').parent().removeClass('half-checked');
                    $(this).find('input[name=pages]').prop('checked', false);

                    if (checkedLength && checkedLength < allCheckboxLength) {
                        $(this).find('input[name=pages]').parent().addClass('half-checked');
                    }
                    else if (checkedLength && checkedLength >= allCheckboxLength) {
                        // $(this).find('input[name=pages]').click();
                        $(this).find('input[name=pages]').prop('checked', true);
                    }

                });
            },
            updateArtboardsList = function (data) {
                $.each(data.pages, function (index, page) {
                    if (page.artboards.length == 0) return;
                    pagesData[page.objectID] = page.artboards;
                    pagesName[page.objectID] = page.name;
                    $.each(page.artboards, function (index, artboard) {
                        var $a = $('#aid-' + artboard.objectID);
                        $a.removeClass('alt');
                        if (index % 2) {
                            $a.addClass('alt');
                        }
                        $a.removeAttr('cache-top')
                            .css('top', index * 48);
                    });
                });
                filter(data);
            },
            sendOrderRequest = function () {
                if (!window.meaxure) return;
                let data = {
                    order: $('input[name=order]:checked').val(),
                    reverse: $('input[name=reverse]:checked').val() == '1',
                    exportInfluenceRect: $('input[name=export-influenceRect]:checked').length > 0,
                    exportOption: $('input[name=export-option]:checked').length > 0,
                    selection: {},
                }
                meaxure.postMessage('sort', data).then(data => updateArtboardsList(data));
            },
            filter = function (data) {
                var $filter = $('#filter'),
                    filterText = $filter.val().toLowerCase().trim();

                if (filterText) {
                    $('#artboards-list li').hide();
                    var i = 0;
                    $.each(pagesData, function (index, artboardData) {
                        var $p = $('.p-' + i),
                            cacheHeight = $p.attr('cache-height');
                        if (!cacheHeight) {
                            var h = $p.css('height');
                            $p.attr('cache-height', h);
                        }

                        var filtered = artboardData.filter(function (aData) {
                            return (pagesName[index] + ' ' + aData.name).toLowerCase().indexOf(filterText) >= 0
                        });

                        $p.css('height', filtered.length * 48);

                        $.each(filtered, function (index, aData) {
                            var $a = $('#aid-' + aData.objectID),
                                cacheTop = $a.attr('cache-top');
                            if (!cacheTop) {
                                var t = $a.css('top');
                                $a.attr('cache-top', t);
                            }

                            $a
                                .show()
                                .css('top', index * 48);
                        });

                        i++;
                    });
                }
                else {
                    $('#artboards-list ul').each(function () {
                        $(this).css('height', $(this).attr('cache-height'))
                        $(this).removeAttr('cache-height');
                    });
                    $('#artboards-list li').each(function () {
                        $(this).css('top', $(this).attr('cache-top')).show();
                        $(this).removeAttr('cache-top');
                    });
                }

            },
            checkedOption = function () {
                if ($('input[name=export-option]:checked').length > 0) {
                    $('input[name=order]').attr('disabled', false);
                    $('input[name=reverse]').attr('disabled', false);
                }
                else {
                    $('input[name=order]').attr('disabled', true);
                    $('input[name=reverse]').attr('disabled', true);
                }
            },
            pagesData = {},
            pagesName = {},
            init = function (data) {
                if (data.language) eval(data.language);
                $('body').html([
                    '<div class="container">',
                    '<div id="artboards-list" class="list">',
                    '<div class="empty" style="padding-top:128px;">',
                    '<h3>' + _('No artboards!') + '</h3>',
                    '<p>' + _('You need add some artboards.') + '</p>',
                    '</div>',
                    '</div>',
                    '<div class="options-bar" style="margin-bottom:0;">',
                    '<div class="opts-checkbox" tabindex="0">',
                    '<div class="v-checkbox v-checked"></div>',
                    '<ul class="checkbutton">',
                    '<li class="c-all">' + _('All') + '</li>',
                    '<li class="c-none">' + _('None') + '</li>',
                    '<li class="c-showing">' + _('Select filtered') + '</li>',
                    '<li class="c-selection">' + _('Selection of Sketch') + '</li>',
                    '<li class="c-current">' + _('Current of Sketch') + '</li>',
                    '</ul>',
                    '</div>',
                    '<div class="opts-filter">',
                    '<input id="filter" type="text" placeholder="' + _('Filter') + '">',
                    '</div>',
                    '</div>',
                    '<div class="options">',
                    '<div class="item">',
                    '<div class="orderbox">',
                    '<div class="radiobox artboard-rows-radio" title="' + _('Order by artboard rows') + '">',
                    '<input id="artboard-rows" type="radio" name="order" value="artboard-rows">',
                    '<label for="artboard-rows"></label>',
                    '</div>',
                    '<div class="radiobox artboard-cols-radio" title="' + _('Order by artboard columns') + '">',
                    '<input id="artboard-cols" type="radio" name="order" value="artboard-cols">',
                    '<label for="artboard-cols"></label>',
                    '</div>',
                    '<div class="radiobox alphabet-radio" title="' + _('Order by alphabet') + '">',
                    '<input id="alphabet" type="radio" name="order" value="alphabet">',
                    '<label for="alphabet"></label>',
                    '</div>',
                    '<div class="radiobox layer-order-radio" title="' + _('Order by layer order') + '">',
                    '<input id="layer-order" type="radio" name="order" value="layer-order">',
                    '<label for="layer-order"></label>',
                    '</div>',
                    '</div>',
                    '<label>',
                    '<div class="checkbox">',
                    '<input id="export-option" type="checkbox" name="export-option" value="1">',
                    '<label for="export-option"></label>',
                    '</div>',
                    _('Advanced mode'),
                    '</label>',
                    '</div>',
                    //export influence rect option
                    '<div class="item" style="margin-top:10px;">',
                    '<div class="reversebox">',
                    '<div class="radiobox positive-radio" title="' + _('Positive') + '">',
                    '<input id="positive" type="radio" name="reverse" value="0">',
                    '<label for="positive"></label>',
                    '</div>',
                    '<div class="radiobox reverse-radio" title="' + _('Reverse') + '">',
                    '<input id="reverse" type="radio" name="reverse" value="1">',
                    '<label for="reverse"></label>',
                    '</div>',
                    '</div>',
                    '<label>',
                    '<div class="checkbox">',
                    '<input id="export-influenceRect" type="checkbox" name="export-influenceRect" value="0">',
                    '<label for="export-influenceRect"></label>',
                    '</div>',
                    _('Export layer influence rect'),
                    '</label>',
                    '</div>',

                    '</div>',
                    '<div class="footer">',
                    '<button id="submit" class="submit" disabled="disabled">' + _('Export') + '</button>',
                    '</div>',
                    '</div>'
                ].join(''))
                var artboardsList = [];
                $.each(data.pages, function (index, page) {
                    var pageIndex = index;
                    if (page.artboards.length > 0) {
                        artboardsList.push('<div id="pid-' + page.objectID + '" class="page-list">');
                        artboardsList.push('<label class="page-item">',
                            '<div class="checkbox">',
                            '<input id="p-' + pageIndex + '" type="checkbox" class="page-' + pageIndex + '" name="pages" value="' + pageIndex + '">',
                            '<label for="p-' + pageIndex + '"></label>',
                            '</div>',
                            page.name,
                            '</label>');
                        var ulHeight = 'height:' + page.artboards.length * 48 + 'px;';
                        artboardsList.push('<ul class="p-' + index + '" style="' + ulHeight + '">');
                        $.each(page.artboards, function (index, artboard) {
                            var liTop = 'top:' + 48 * index + 'px;',
                                classAlt = (index % 2) ? 'alt' : '';
                            artboardsList.push(
                                '<li id="aid-' + artboard.objectID + '" class="' + classAlt + '" title="' + artboard.name + '" style="' + liTop + '">',
                                '<label class="artboard-item">',
                                '<div class="checkbox">',
                                '<input id="artboard-' + artboard.objectID + '" type="checkbox" class="page-' + pageIndex + '" name="artboards" value="' + artboard.objectID + '">',
                                '<label for="artboard-' + artboard.objectID + '"></label>',
                                '</div>',
                                '<div class="text">',
                                artboard.name,
                                '</div>',
                                '<span style="display:none;">' + page.name + '</span>',
                                '</label>',
                                '</li>'
                            );
                        });
                        artboardsList.push('</ul>');
                        artboardsList.push('</div>');
                    }
                });
                if (artboardsList.length > 0) {
                    $('#artboards-list').html(artboardsList.join(''));
                }

                $('input[name=artboards]').change(function () {
                    var id = $(this).attr('class');
                    checkVCheckbox();
                    checkPCheckbox();
                });

                if (data.exportOption) {
                    $('#export-option').attr('checked', true);
                }

                if (data.exportInfluenceRect) {
                    $('#export-influenceRect').attr('checked', true);
                }

                $('.checkbutton')
                    .on('click', '.c-all', function () {
                        $('input[name=artboards]').prop("checked", true);
                        $('.opts-checkbox').blur();
                        checkVCheckbox();
                        checkPCheckbox();
                    })
                    .on('click', '.c-none', function () {
                        $('input[name=artboards]').prop("checked", false);
                        $('.opts-checkbox').blur();
                        checkVCheckbox();
                        checkPCheckbox();
                    })
                    .on('click', '.c-showing', function () {
                        $('input[name=artboards]').prop("checked", false);
                        $('#artboards-list li').each(function () {
                            if ($(this).css('display') != 'none') {
                                $(this).find('input[name=artboards]').prop("checked", true);
                            }
                        });
                        $('.opts-checkbox').blur();
                        checkVCheckbox();
                        checkPCheckbox();
                    })
                    .on('click', '.c-selection', function () {
                        $('input[name=artboards]').prop("checked", false);
                        $.each(data.selection, function (index, id) {
                            $('#artboard-' + id).prop("checked", true);
                        });
                        $('.opts-checkbox').blur();
                        checkVCheckbox();
                        checkPCheckbox();
                    })
                    .on('click', '.c-current', function () {
                        $('input[name=artboards]').prop("checked", false);
                        $.each(data.current, function (index, id) {
                            $('#artboard-' + id).prop("checked", true);
                        });
                        $('.opts-checkbox').blur();
                        checkVCheckbox();
                        checkPCheckbox();
                    });

                $('input[name=pages]').change(function () {
                    var id = $(this).attr('class');
                    $('.' + id + '[name=artboards]').prop('checked', false);
                    if ($(this).is(':checked')) {
                        $('.' + id + '[name=artboards]').prop('checked', true);
                    }
                    checkVCheckbox();
                    checkPCheckbox();
                });

                $('#filter').keyup(function () {
                    filter(data);
                });

                $('#' + data.order).attr('checked', true);
                if (data.reverse) {
                    $('#reverse').attr('checked', true);
                } else {
                    $('#positive').attr('checked', true);
                }

                $('input[name=order]').change(function () {
                    sendOrderRequest();
                });
                $('input[name=reverse]').change(function () {
                    sendOrderRequest();
                });

                $('input[name=export-option]').change(checkedOption);

                $('#submit').click(function () {
                    var data = {
                        order: $('input[name=order]:checked').val(),
                        reverse: $('input[name=reverse]:checked').val() == '1',
                        exportInfluenceRect: $('input[name=export-influenceRect]:checked').length > 0,
                        exportOption: $('input[name=export-option]:checked').length > 0,
                        selection: {},
                    }
                    $('input[name=artboards]:checked').each(function () {
                        var objectID = $(this).val();
                        data.selection[objectID] = true;
                    });
                    meaxure.postMessage('submit', data);
                });

                if (!data.selection) {
                    $.each(data.current, function (index, id) {
                        $('#artboard-' + id).prop("checked", true);
                    });
                }

                $.each(data.selection, function (index, id) {
                    $('#artboard-' + id).prop("checked", true);
                });


                checkVCheckbox();
                checkPCheckbox();
                sendOrderRequest();
                checkedOption();
                if (data.currentPageID) {
                    let page = $('#pid-' + data.currentPageID);
                    if (page.length) {
                        $('#artboards-list').scrollTop(
                            page.position().top
                        );
                    }
                }
            }
    </script>
</head>

<body>
    <script>
        if (window.meaxure) {
            meaxure.postMessage('init').then(data => {
                init(data);
                onInitOK();
            }).catch(error => showError(error));
        } else {
            let testData = {
                exportOption: 1,
                order: 'artboard-rows',
                reverse: false,
                current: ['page-id-1'],
                currentPageID: 'page-id-1',
                selection: [4, 7],
                pages: [{
                    name: 'Page 1',
                    objectID: 'page-id-0',
                    artboards: [
                        { name: 'Index', objectID: 'artboard-id-0' },
                        { name: 'Video', objectID: 'artboard-id-1' },
                        { name: 'Explore', objectID: 'artboard-id-2' },
                        { name: 'Profile', objectID: 'artboard-id-3' }
                    ]
                }, {
                    name: 'Page 2',
                    objectID: 'page-id-1',
                    artboards: [
                        { name: 'Single content', objectID: 'artboard-id-4' },
                        { name: 'Single Video', objectID: 'artboard-id-5' },
                        { name: 'Search page', objectID: 'artboard-id-6' },
                        { name: 'Settings', objectID: 'artboard-id-7' }
                    ]
                }]
            };
            init(testData);
        }
    </script>
</body>

</html>